<template>
  <div class="home">
    <h1>VueX总结</h1>

    <h3>state(全局变量)</h3>
    <p>(直接调用:this.$store.state,辅助函数：mapState，在computed中 ...mapState(["page", "open", "test"]),)</p>
    <h3>
      <p>open:{{ open }}</p>
    </h3>
    <h3>getter(相当于computed)</h3>
    <p>(this.$store.getters,辅助函数：mapGetters,在computed中 ...mapGetters(["getOpen"]),)</p>
    <h3>
      <P>open(+30):{{ getOpen(30) }}</P>
    </h3>

    <h3>Mutation(改变state里面的值)</h3>
    <P>(直接调用：this.store.commit("setOpen")),辅助函数:在methods中: ...mapMutations(["setOpen", "onePlus"]),</P>
    <button @click="setOpen(10)">open+10</button>
    <h3>Action(异步提交mutation,)</h3>
    <p>(直接调用this.store.dispatch("test"),辅助函数:在methods中: ...mapActions(["setOpens"]),)</p>
    <button @click="setOpens(10)">open+10</button>
    <h3>Module(如果vuex里面的数据太多)</h3>
    <p>number:{{ test.number }}</p>
    <p>调用module里面的mutations</p>
    <button @click="onep">open+10</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    styec() {
      return this.$store.getters.getOpen(1000);
    },
    ...mapGetters(["getOpen"]),
    ...mapState(["page", "open", "test"]),
  },
  created() {
    console.log(this.$store.test);
  },
  methods: {
    ...mapMutations(["setOpen", "onePlus"]),
    ...mapActions(["setOpens"]),
    onep() {
      this.$store.commit("onePlus");
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  text-align: center;
  font-size: 15px;
  overflow: auto;
  height: 1000px;
}
</style>